<template>
	<!-- 系统目录 西成药品加成率 -->
	<div class="box">
		<!-- main -->
		<div class="main">
			<!-- left -->
			<div class="main-left">
				<!-- tree -->
				<el-tree 
				:data="elTree"
				:props="defaultProps"
				node-key="label"
				:default-expanded-keys="['全部']"
				accordion 
				@node-click="handleNodeClick"
				class="custom-tree"
				>
					<span class="custom-tree-node" slot-scope="{ node, data }" style="font-size: 12px;">
						<span :name="node.label">
							<i v-if="!data.children"
							:class="node.expanded ? 'el-icon-openFile' : 'el-icon-closeFiles'"></i>
							<i v-else class="el-icon-openFile"></i>{{ node.label }}
						</span>
					</span>
				</el-tree>
			</div>
			<!-- right -->
			<div class="main-right" ref="mainRight">
				<!-- tit -->
				<div class="main-icon">
					<div class="main-icon-a">
						<i :class="iconComes" style="border-radius: 50%;font-size: 20px;padding: 6px;margin-left: 8px;;background-color: #409EFF;color: #fff;"></i>
						<span style="font-size: 14px;font-weight:300;margin-left: 12px;color: #606266;">{{ CatalogueName }}</span>
					</div>
					<!-- btn1 -->
					<div class="main-icon-b">
						<span style="font-size: 12px;color: #606266;font-weight: bold;">状态：</span>
						<el-dropdown @command="handleCommand" trigger="click">
							<span class="el-dropdown-link">{{ DropDownedName }}<i class="el-icon-down"></i></span>
							<el-dropdown-menu slot="dropdown">
							  <el-dropdown-item command="a">可用</el-dropdown-item>
							  <el-dropdown-item command="b">禁用</el-dropdown-item>
							  <el-dropdown-item command="c" divided>全部</el-dropdown-item>
							</el-dropdown-menu>
					    </el-dropdown>
					</div>
					<!-- btn2 -->
					<div class="main-icon-c">
						<span style="font-size: 12px;color: #606266;font-weight: bold;display: inline-block;width: 68px;">关键字：</span>
						<el-input size="mini" placeholder="编码、名称、拼音简码" suffix-icon="el-icon-key" v-model="searchValue"></el-input>
					</div>
					<!-- btn3 -->
					<div class="main-icon-c">
						<el-button v-for="(v,i) in headerBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="mini" @click="handClick(i)">{{ v.title }}</el-button>
					</div>
				</div>
				<!-- table -->
				<div class="table">
					<el-table :data="tableData" border highlight-current-row
					element-loading-text="数据加载中..." v-loading="loading" element-loading-spinner="el-icon-loading"
					 @current-change="handleCurrentTableChange">
					 <!-- 过滤 -->
						<el-table-column prop="markUpType" label="加成方式">
							 <template slot-scope="{ row }">
								<!-- 根据加成方式显示不同的图标 -->
								<span>{{ statusMap[row.markUpType] || '' }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="drugType" label="药品类型">
							 <template slot-scope="{ row }">
								<!-- 根据药品类型显示不同的图标 -->
								<span>{{ kindsMap[row.drugType] || '' }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="state" label="状态" width="88" align="center">
							<template slot-scope="{ row }">
								<!-- 根据药品类型显示不同的图标 -->
								<i :class="statusIconMap[row.state]" :style="{ color: statusColorMap[row.state] }"></i>
								<span>{{ stMap[row.state] || '' }}</span>
							</template>
						</el-table-column>
						<el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop" :label="col.name" :width="columnWidth(col, tableData)"></el-table-column>
						<!-- fixed -->
						<el-table-column fixed="left" label="行号" type="index" align="center"></el-table-column>
					</el-table>
					<!-- 分页 -->
					<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageNum"
					:page-sizes="[5, 10, 20]"
					:page-size="pageSize"
					:total="totalSize"
					layout="total, sizes, prev, pager, next, jumper"
					background
					>
					</el-pagination>
				</div>
				<!-- feet -->
				<div class="feet">
					<div class="feetBtn">
						<el-button v-for="(v,i) in feetBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="mini" @click="feetHandClick(v,i)">{{ v.title }}</el-button>
					</div>
				</div>
			</div>
			<!-- add Model -->
			<div class="addModel">
				<el-dialog title="新建加成率" :visible.sync="addDialogVisible" width="45%" :before-close="handleClose" :modal="false"
				:close-on-click-modal="false">
				  <!-- 表单 header -->
				  <div class="headerForm">
				  	<el-form ref="addForm" :rules="addFormRules" :model="addForm" label-width="88px" size="mini">
				  		<el-row :gutter="8">
				  			<el-col :xs="val.xs" :sm="val.xs" :md="val.md" :lg="val.lg" :xl="val.xl" type="flex" v-for="(val,i) in formType" :key="i">
				  				<!-- input -->
				  				<el-form-item v-if="val.type == 'input'" :label="val.label" :prop="val.modelValue">
				  					<el-input :suffix-icon='val.prefix' v-model="$data.addForm[val.modelValue]" :placeholder="val.placeholder" :disabled="val.disabled" ></el-input>
				  				</el-form-item>
				  				<!-- select -->
				  				<el-form-item v-if="val.type == 'select'" :label="val.label" :prop="val.modelValue">
				  					<el-select v-model="$data.addForm[val.modelValue]" filterable placeholder="请选择" @focus="sname(val,i)"
				  					@change="handleChange" :disabled="val.disabled != '' ? val.disabled : getdisabled">
				  						<el-option v-for="item in $data[val.op]" :key="item.id" :label="item.label" :value="item.id"> 
				  						<span style="color: #8492a6; font-size: 12px">{{ item.label }}</span></el-option>
				  					</el-select>
				  				</el-form-item>
				  				<!-- textarea -->
				  				<el-form-item v-if="val.type == 'textarea'" :label="val.label" :prop="val.modelValue">
				  					<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="$data.addForm[val.modelValue]"></el-input>
				  				</el-form-item>
				  			</el-col>
				  		</el-row>
				  	</el-form>
				  </div>
				  <span slot="footer" class="dialog-footer">
				    <el-button size="mini" @click="addDialogVisible = false">取 消</el-button>
				    <el-button size="mini" type="primary" @click="addSubmit">确 定</el-button>
				  </span>
				</el-dialog>
			</div>
			<!-- edit Model -->
			<div class="editModel">
				<el-dialog title="修改" :visible.sync="editDialogVisible" width="45%" :before-close="handleEditClose" :modal="false">
				  <!-- 表单 header -->
				  <div class="headerForm">
				  	<el-form ref="editForm" :rules="addFormRules" :model="editForm" label-width="88px" size="mini">
				  		<el-row :gutter="8">
				  			<el-col :xs="val.xs" :sm="val.xs" :md="val.md" :lg="val.lg" :xl="val.xl" type="flex" v-for="(val,i) in formType" :key="i">
				  				<!-- input -->
				  				<el-form-item v-if="val.type == 'input'" :label="val.label" :prop="val.modelValue">
				  					<el-input :suffix-icon='val.prefix' v-model="$data.editForm[val.modelValue]" :placeholder="val.placeholder" :disabled="val.disabled" ></el-input>
				  				</el-form-item>
				  				<!-- select -->
				  				<el-form-item v-if="val.type == 'select'" :label="val.label" :prop="val.modelValue">
				  					<el-select v-model="$data.editForm[val.modelValue]" filterable placeholder="请选择" @focus="sname(val,i)"
				  					@change="handleEditChange" :disabled="val.disabled != '' ? val.disabled : getdisabled">
				  						<el-option v-for="item in $data[val.op]" :key="item.id" :label="item.label" :value="item.id"> 
				  						<span style="color: #8492a6; font-size: 12px">{{ item.label }}</span></el-option>
				  					</el-select>
				  				</el-form-item>
				  				<!-- textarea -->
				  				<el-form-item v-if="val.type == 'textarea'" :label="val.label" :prop="val.modelValue">
				  					<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="$data.editForm[val.modelValue]"></el-input>
				  				</el-form-item>
				  			</el-col>
				  		</el-row>
				  	</el-form>
				  </div>
				  <span slot="footer" class="dialog-footer">
				    <el-button size="mini" @click="editDialogVisible = false">取 消</el-button>
				    <el-button size="mini" type="primary" @click="editSubmit">确 定</el-button>
				  </span>
				</el-dialog>
			</div>
		</div>
<!-- 		<div class="feetbtn">
			<el-button v-for="(v,i) in feetBtn" :key="i" :type="v.types" :loading="loading" :icon="v.icon" size="small" plain @click="feetHandClick(v)">{{ v.label }}</el-button>
		</div> -->
	</div>
</template>

<script>
	// selfs / js
	import addForm from './addForm.js' //Form表单
	import AccType from './AddType.js'
	// 接口
	import { markUppage,docMark,updatedocMark,deldocMark } from "@/api/systemCatalogue/markUp.js";
	export default {
		inject: ['reload'], // 无痕刷新
		components: {
			// box
		},
		data() {
			return {
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				// str
				drugType:'',
				windowWidth:'', //右侧表格动态宽度
				searchValue:'',
				CatalogueName:'药品加成率',
				DropDownedName:'可用',
				iconComes:'el-icon-byj',
				// boolean
				disabled:true,
				getdisabled:true,
				loading:false,
				addDialogVisible:false, // 新增控制
				editDialogVisible:false, // 编辑控制
				
				// number
				idx: 0,
				pageNum: 1, //当前页currentPage
				pageSize: 8,
				totalSize: 10, //总条数
				/* obj */
				addForm:{}, // form表单 新增 * 
				editForm:{}, // form表单 修改 * 
				permissions:{},
				// arr
				data: [],
				userInfo: [],
				tableData: [],
				currentTable:[],
				TypeOption:[
					{ id:1,label:'西药',value:'西药'},{ id:2,label:'中草药',value:'中草药'},
					{ id:3,label:'卫材',value:'卫材'},
					// { id:4,label:'血液',value:'血液'},
					// { id:5,label:'疫苗',value:'疫苗'},
					// { id:9,label:'中药',value:'中药'}
				],
				// MarkOption:[
				// 	{ id:1,label:'不加成',value:'不加成'},{ id:2,label:'固定加成',value:'固定加成'},
				// 	{ id:3,label:'比例加成',value:'比例加成'},{ id:4,label:'手工比例加成',value:'手工比例加成'}
				// ],
				//加成比例
				MarkOption:[
					{ id:1,label:'比例加成',value:'比例加成'},{ id:2,label:'固定加成',value:'固定加成'},{ id:3,label:'手工比例',value:'手工比例'}
				],
				formType:[], // 表单头部内容
				statusOption:[{ id:0,label:'禁用',value:'禁用'},{ id:1,label:'可用',value:'可用'}],
				// title右侧按钮
				headerBtn:[
				 { refesh:"refesh", title:"刷新", type:"", icon:"el-icon-refresh" },
				 { senior:"senior", title:"高级", type:"primary", icon:"" },
				],
				// 页面默认按钮// 基础按钮配置（始终显示）
				defaultButtons:[
				 // { refesh:"refesh", label:"新增", type:"primary", icon:"el-icon-edit" },
				 // { refesh:"refesh", label:"修改", types:"primary", icon:"el-icon-finished" },
				 // { refesh:"refesh", title:"删除", type:"danger", icon:"el-icon-document-checked" },
				 { refesh:"refesh", title:"查看", type:"primary", icon:"el-icon-sort" },
				 { refesh:"refesh", title:"打印", type:"primary", icon:"el-icon-printer" },
				 { refesh:"refesh", title:"导出", type:"primary", icon:"el-icon-finished" },
				 { refesh:"refesh", title:"关闭", type:"primary", icon:"el-icon-close" },
				 ],
				 // 最终使用的按钮数组
				feetBtn: [],
				// title右侧按钮
				tableRows:[
					{ name:"价格下限", prop:"pricLmtTop", type:"" },{ name:"价格上限", prop:"pricLmtLow", type:"" },
					{ name:"加成率", prop:"markUpRate", type:"" },{ name:"加价金额", prop:"markUpPric", nz:"nz" },
					{ name:"创建时间", prop:"createTime", type:"" },{ name:"操作人", prop:"createId", nz:"nz" },
					{ name:"备注", prop:"remark", type:"" },
				],
				// 表单验证规则 header
				addFormRules:{
					drugType: [{ required: true, message: '请先选择要添加的加成类型！', trigger: 'change' }],
					markUpType: [{ required: true, message: '请选择加成方式！', trigger: 'change' }],
					pricLmtTop: [{ required: true, message: '请输入价格下限！', trigger: 'blur' }],
					pricLmtLow: [{ required: true, message: '请输入价格上限！', trigger: 'blur' }],
					markUpPric: [
					  { 
					    validator: (rule, value, callback) => {
					      if (value && !/^(0|[1-9]\d*)(\.\d+)?$/.test(value)) {
					        callback(new Error('固定加成金额格式错误！'));
					      } else {
					        callback();
					      }
					    },
					    trigger: 'blur'
					  }
					]
				},
				elTree:[
					{ label: '全部', path:'', title:'', icon:'el-icon-news',
					children:[
						{ id:1,label: '西药',path:'',title:'西药',icon:'el-icon-xy'},
						{ id:2,label: '中草药',path:'',title:'中草药',icon:'el-icon-zhongchengyao'},
						{ id:3,label: '卫材',path:'',title:'卫材',icon:'el-icon-xyjhtxyyzhy'},
						// { id:3,label: '中成药',path:'',title:'中成药',icon:'el-icon-zhongcaoyao'},
						// { id:4,label: '民族药',path:'',title:'民族药',icon:'el-icon-xyzp'},
						// { id:6,label: '血液',path:'',title:'血液',icon:'el-icon-blood'},
						// { id:7,label: '疫苗',path:'',title:'疫苗',icon:'el-icon-yimiaoke'},
						// { id:8,label: '检验试剂',path:'',title:'检验试剂',icon:'el-icon-yimiaoke'},
						// { id:9,label: '营养',path:'',title:'营养',icon:'el-icon-yimiaoke'},
					],
				},
				],
				stMap:{
					0:'禁用',
					1:'启用'
				},
				statusIconMap: {
					0: 'el-icon-zhinengfenxi',
					1: 'el-icon-finish',
				},
				statusColorMap: {
					0: '#909399',
					1: '#67C23A',
				},
				statusMap: {
					1: '比例加成',
					2: '固定加成',
					3: '手工比例加成',
					4: '不加成',
				},
				addWaysMap: {
					1: '比例加成',
					2: '固定加成',
					3: '手工比例加成',
					4: '不加成',
				},
				kindsMap: {
					1: '西药',
					2: '中草药',
					3: '卫材',
					4: '血液',
					5: '疫苗',
					9: '中药',
				},
			};
		},
		watch: {
		    // 监听路由变化重新初始化按钮
		    '$route.path'(newPath) {
		      this.initButtons();
		    }
		},
		mounted() {
			this.loadData();
			this.getForm();
			//获取动态盒子宽度，实时赋值给右侧 => this.$refs.mainRight.offsetWidth;
			this.$nextTick(()=>{
				this.updateWindowWidth();
				window.addEventListener('resize', this.updateWindowWidth);
			})
			// 定义数据来源
			this.formType = AccType.map(function(val) { return val })
		},
		beforeDestroy() {
		    this.$off('permissions-changed', this.updateButtons);
		  },
		methods: {
			/*
				数据源
			*/
			async loadData(){
				let res = await markUppage({
					drugType: this.drugType,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				})
				if(res.code === 200){
					this.loading = true;
					setTimeout(() =>{
						this.tableData = res.data.content
						this.totalSize = res.data.totalSize
						this.loading = false;
						this.$message({ type: 'success', message: '加载完成'});
					},888)
					
				}
			},
			// 挂载或销毁前后重新赋值后端参数
			getForm(){
				// 左侧提交表单
				this.addForm = addForm.map(v => {return v })[0]; // Form
				this.editForm = addForm.map(v => {return v })[0]; // Form
				// this.$handlePermissions(); // 引入全局自定义封装方法
				this.initButtons();// 引入全局自定义封装方法
			},
			initButtons() {
			    // 获取当前路由路径
			    const currentPath = this.$route.path;
			    // 获取路由对应的权限按钮
			    const routeButtons = this.$getRouteButtons(currentPath);
			    // console.log(routeButtons,'routeButtonsrouteButtons');
			    // 合并到现有按钮数组
			    this.feetBtn = this.$mergeButtons(this.defaultButtons, routeButtons);
				// console.log(this.feetBtn,'this.feetBtnthis.feetBtn');
			},
			/*
				about tree
			*/
			handleNodeClick(data,e) {
				this.drugType = data.id
				this.loadData();
			},
			// add
			async addSubmit(){
				console.log(this.addForm);
				//触发验证表单
				this.$refs.addForm.validate(async(valid) => {
				  if(valid){
					//验证通过
					// console.log('submit');
					let res = await docMark(this.addForm)
					console.log(res);
					if (res.code === 200){
					this.$message({ message:res.message, type:"success" });
					this.addDialogVisible = false
					this.$refs['addForm'].resetFields();
					this.loadData(); //更新数据驱动
					}else{
					  //验证失败
					  this.$message({ type: 'error', message: res.message});
					}
				}
				});
			},
			// editSubmit
			async editSubmit(){
				//触发验证表单
				this.$refs.editForm.validate(async(valid) => {
				  if(valid){
					//验证通过
					console.log(this.editForm);
					this.editForm.createTime = ''
					let res = await updatedocMark(this.editForm)
					console.log(res);
					if (res.code === 200){
					this.$message({
						message:res.message,
						type:"success"
					});
					this.editDialogVisible = false
					this.loadData(); //更新数据驱动
					}else{
					  // 失败
					  this.$message({ type: 'error', message: res.message});
					}
				}
				});
			},
			
			/*
				about table
			*/
			// 表单头部聚焦事件 => addForm
			async sname(val,i) {
				// val.id = i;
				this.idx = i;
				// i event
				switch (i) {
					// case 1: 
					// 	if(val === 1){
					// 		this.addForm.markUpPric = ''
					// 		console.log(this.formType)
					// 		// this.disabled = true
					// 	}else{
					// 		this.addForm.markUpRate = '1.0'
					// 	}
					// break;
				}
			},
			// SelectVal to addForm
			handleChange(val){
				// i event
				switch (this.idx) {
					case 1:
						if(val === 1){
							console.log('比例');
							this.editForm.markUpPric = ''
							// this.editForm.markUpRate = ''
							this.formType[5].disabled = false
							this.formType[6].disabled = true
						}else if(val === 2){
							console.log('固定');
							this.formType[5].disabled = true
							this.formType[6].disabled = false
							this.editForm.markUpRate = ''
						}else if(val === 3){
							console.log('手工比例加成');
							this.formType[5].disabled = false
							this.formType[6].disabled = true
							this.editForm.markUpPric = ''
							this.editForm.markUpRate = ''
							this.disabled = true
						}
					break;
				}
				// i event
			},
			// SelectVal to editForm => 修改
			handleEditChange(val){
				// i event
				switch (this.idx) {
					case 1: 
						if(val === 1){
							console.log('比例');
							this.editForm.markUpPric = ''
							// this.editForm.markUpRate = ''
							this.formType[5].disabled = false
							this.formType[6].disabled = true
						}else if(val === 2){
							console.log('固定');
							this.formType[5].disabled = true
							this.formType[6].disabled = false
							this.editForm.markUpRate = ''
						}else if(val === 3){
							console.log('手工比例加成');
							this.formType[5].disabled = false
							this.formType[6].disabled = true
							this.editForm.markUpPric = ''
							this.editForm.markUpRate = ''
							this.disabled = true
						}
					break;
				}
				// i event
			},
		    // col 里面包含了表头字段和名称，list 是表格数据
		    columnWidth(col, list) {
				let prop = col.prop,lab = col.lab;
				let width = 40; // 设定一个最小值
				let maxlenStr = ""; // 最长字符串
				for (let info of list) {
		           if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
		        }
		        width = Math.max(width, len(lab), len(maxlenStr));
		        // 表格自带的内边距(20px) 自调
		        return width + 12; // 这里加了 12px
		        function len(str) {
		           // 实际分配长度可根据需要自行调整
		           let length = 8;
		           for (const char of str + "") {
		             // 英文小写字符 8px
		             if ("a" <= char && char <= "z") length += 8;
		             // 英文大写字符 8px
		             else if ("A" <= char && char <= "Z") length += 8;
		             // 中文字符 28px
		             else if (char >= "\u4e00" && char <= "\u9fa5") length += 32;
		             // 其他 8px
		             else length += 12;
		           }
		           return length;
		        }
		    },
			// see table
			// 表格底部循环按钮事件
			feetHandClick(v){
				// i event
				// 处理逻辑 => 新增
				if(v.title == '新增'){
					this.addDialogVisible = true;
				}
				// 处理逻辑 => 修改
				else if (v.title == '修改'){
					// 处理索引1的逻辑 => 修改
					if(this.currentTable.length != 0){
						this.editDialogVisible = true;
						this.editForm = {...this.currentTable[0]}
					}else{
						this.$message({ type: 'warning', message: '请先选择一条数据'});
					}
				}
				// 处理逻辑 => 删除
				else if(v.title == '删除'){
					// 处理索引2的逻辑 => 删除
					if(this.currentTable.length != 0){
						this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						  confirmButtonText: '确定',
						  cancelButtonText: '取消',
						  type: 'warning'
						}).then(async() => {
							let delId = this.currentTable[0].id;
							let res = await deldocMark({id:delId})
							if(res.code === 200){
								setTimeout(()=>{
									this.$message({ type: 'success', message: res.message})
									this.loadData();
								},1888)
							}else{
								this.$message({ type: 'error', message: res.message})
							}
						}).catch(() => {
						  this.$message({
							type: 'info',
							message: '已取消删除'
						  });          
						});
					}else{
						this.$message({ type: 'warning', message: '请先选择一条要删除的数据'});
					}
				}
				// 处理逻辑 => 查看
				else if(v.title === '查看'){
					this.$confirm('敬请期待')
					.then(_ => {})
					.catch(_ => {});
				}
				// 处理逻辑 => 打印
				else if(v.title === '打印'){
					this.$confirm('敬请期待')
					.then(_ => {})
					.catch(_ => {});
				}
				// 处理逻辑 => 导出
				else if(v.title === '导出'){
					this.$confirm('敬请期待')
					.then(_ => {})
					.catch(_ => {});
				}
				// 处理逻辑 => 关闭
				else if(v.title === '关闭'){
					setTimeout(() =>{
						window.history.back();
					},888)
				}
				// 处理逻辑 => 关闭
				else{
					this.$confirm('敬请期待')
					.then(_ => {})
					.catch(_ => {});
				}
			},
			// input 
			handleClose(done) {
				this.$confirm('确认关闭？')
				  .then(_ => {
					this.$refs['addForm'].resetFields();
					done();
				  })
				  .catch(_ => {
					
				});
			},
			handleEditClose(done){
				this.$confirm('确认关闭？')
				  .then(_ => {
					this.$refs['editForm'].resetFields();
					done();
				  })
				  .catch(_ => {
					
				});
			},
			// db events
			// 表格单选
			handleCurrentTableChange(val){
				this.currentTable[0] = val
			},

			// 步骤
			handClick(i) {
				// i event
				switch (i) {
					case 0:
						// 处理索引0的逻辑 => 刷新
						this.loading = true;
						setTimeout(() => {
							this.reload();
							this.$message({type:'success',message:'已刷新'})
							this.loading = false;		
						}, 1500)
						break;
					case 1:
						// 处理索引1的逻辑
						this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
				}
			},
			handleCommand(command) {
			  // console.log(command);
			  // 根据 command 值执行相应的逻辑
			  switch (command) {
				case 'a':
				  // 处理a的逻辑
				  console.log('执行A逻辑');
				  this.DropDownedName = '可用'
				  break;
				case 'b':
				  // 处理b的逻辑
				  console.log('执行B逻辑');
				  this.DropDownedName = '禁用'
				  break;
				case 'c':
				  // 处理b的逻辑
				  this.DropDownedName = '全部'
				  break;
				// ... 其他 case
			  }
			},
			// 实时宽度
			updateWindowWidth() {
				this.windowWidth = window.innerWidth - 328;
			},
			//分页
			//每页条数改变触发
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageNum = val;
			},
			//当前条数改变触发
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.pageNum = val;
			},

		}
	}
</script>

<style lang="less" scoped>
	.box {
	  height: calc(100vh - 128px); // 减去导航栏高度
	  width: 100%;
	  overflow: hidden;
	/deep/ .el-table .cell{
		font-size: 12px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	/deep/ .el-table th{
		font-size: 12px;
		background-color: #f1f1f1;
		border: none;
		color: #2d2d2d;
	}
	/deep/ .el-table {
	    width: 100%;
	    height: 100% !important;
	    .el-table__body-wrapper {
	      overflow-x: hidden;
	    }
		.el-table__empty-block {
		  background-color: transparent;
		} 
	}
	/* 自定义高亮颜色 */
	::v-deep .el-table__body tr.current-row > td {
	  background-color: #00557f !important;
	  color: #f9f9f9; /* 可选：修改文字颜色 */
	}
	  .main {
	    display: flex;
	    height: 100%;
	    width: 100%;
	
	    // 左侧树形菜单
	    .main-left {
	      width: 128px;
	      height: 100%;
	      // background: #f5f7fa;
	      border-right: 1px solid #e6e6e6;
	      overflow-y: auto;
	      scrollbar-width: none; /* Firefox */
	      -ms-overflow-style: none; /* IE 10+ */
	      
	      &::-webkit-scrollbar {
	        display: none; /* Chrome Safari */
	      }
	
	      /deep/ .el-tree {
	        height: 100%;
			opacity: .8;
			// background: #f5f7fa;
	        .el-tree-node__content {
	          height: 36px;
	        }
	      }
	    }
	    
	    // 右侧内容区域
	    .main-right {
	      flex: 1;
	      display: flex;
	      flex-direction: column;
	      height: 100%;
	      overflow: hidden;
	      
	      // 顶部搜索区域
		.main-icon {
			display: flex;
			align-items: center;
			padding: 12px;
			line-height: 40px;
			.main-icon-a{
				// width: 240px;
				// background-color: #00557f;
			}
			.main-icon-b{
				margin-left: 28px;
				/deep/ .el-dropdown{
					font-size: 12px;
					cursor: pointer;
				}
				/deep/ .el-dropdown:hover {
					font-weight: bold;
					color: #66b1ff;
				}
				/deep/ .el-icon--right{
					// background-color: #66b1ff;
				}
				/deep/ .el-popper[x-placement^=bottom]{
					margin-top: 0;
				}
			}
			// c
			.main-icon-c{
				display: flex;
				margin-left: 28px;
				/deep/ [data-v-2bacc09b] .el-color-picker__icon, .el-input[data-v-2bacc09b], .el-textarea[data-v-2bacc09b]{
					width: 80%;
				}
			}
		}
	      
	      // 表格容器（带滚动）
	      .table {
	        flex: 1;
			width: 100%;
	        overflow: hidden;
	        display: flex;
			opacity: .8;
	        flex-direction: column;
			/deep/ .el-pagination {
				margin: 12px;
			}
	    }
	      
	      // 底部固定区域
	      .feet {
	        height: 40px;
	        display: flex;
			align-items: center;
	        padding: 12px;
	        // background: #fff;
	        border-top: 1px solid #e6e6e6;
	        flex-shrink: 0;
	        
	        .feetBtn {
	          gap: 8px;
	        }
			
	        }
	    }
	  }
		
		.addModel{
			/deep/ .el-dialog__header{
				padding: 12px;
				line-height: 28px;
				background-color: #007bb0;
			}
			/deep/ .el-dialog__title{
				color: #fff;
				font-size: 12px;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close{
				color: #fff;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
				background-color: brown;
			}
			/deep/ .el-form-item__label{
				font-size: 12px;
			}
			/deep/ .el-input--mini .el-input__inner{
				height: 26px;
			}
		}
		.editModel{
			/deep/ .el-dialog__header{
				padding: 12px;
				line-height: 28px;
				background-color: #007bb0;
			}
			/deep/ .el-dialog__title{
				color: #fff;
				font-size: 12px;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close{
				color: #fff;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
				background-color: brown;
			}
			/deep/ .el-form-item__label{
				font-size: 12px;
			}
			/deep/ .el-input--mini .el-input__inner{
				height: 26px;
			}
		}
	}

</style>